<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@include file="../include/include-head.jsp" %>
    <link rel="stylesheet" href="ztree/zTreeStyle.css"/>
	<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="crowd/my-menu.js"></script>
    <script type="text/javascript">

    $(function() {

        // 调用专门封装的函数，初始化生成树形结构
        generateTree();

        // 给页面添加按钮绑定单击响应函数
        $("#treeDemo").on("click",".addBtn",function() {

            // 将当前节点的id，作为新节点的pid保存到全局变量中
            window.pid = this.id;

            // 打开模态框
            $("#menuAddModal").modal("show");

            return false;
        });


        // 给添加子节点的模态框中得保存按钮绑定单击响应函数
        $("#menuSaveBtn").click(function() {

            // 收集表单中用户输入的数据
            var name = $.trim($("#menuAddModal [name=name]").val());

            var url = $.trim($("#menuAddModal [name=url]").val());

            // 定位到被选中的那个单选按钮
            var icon = $("#menuAddModal [name=icon]:checked").val();


            // 发送ajax请求执行保存
            $.ajax({
                "url": "menu-save.json",
                "type": "post",
                "data": {
                    "pid": window.pid,
                    "name": name,
                    "url": url,
                    "icon": icon
                },
                "dataType": "json",
                "success": function(response) {
                    var result = response.result;

                    if (result == "SUCCESS"){
                        layer.msg("操作成功！");

                        // 刷新页面树形结构
                        generateTree();
                    }

                    if (result == "FAILED"){
                        layer.msg("操作失败！" + response.message);
                    }
                },
                "error": function(response) {
                    layer.msg(response.status+" "+response.statusText);
                }
            });

            // 关闭模态框
            $("#menuAddModal").modal("hide");


            // 清理表单
            // jQuery对象调用click()函数，里面不穿参数，相当于用户点击了一下
            $("#menuResetBtn").click();

        });



        // 给编辑按钮绑定单击响应函数
        $("#treeDemo").on("click",".editBtn",function() {

            // 当前节点id保存到全局变量中
            window.id = this.id;

            // 打开模态框
            $("#menuEditModal").modal("show");


            // 获取zTreeObj对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            // 根据id属性查询节点对象
            // 用来搜索节点的属性名
            var key = "id";

            // 用来搜索节点的属性值
            var value = window.id;

            var currentNode = zTreeObj.getNodeByParam(key,value);

            // 回显表单数据
            $("#menuEditModal [name=name]").val(currentNode.name);
            $("#menuEditModal [name=url]").val(currentNode.url);

            // 回显 radio 可以理解为：被选中的radio的value属性可以组成一个数组，然后再用这个数组，设置回radio
            $("#menuEditModal [name=icon]").val([currentNode.icon]);

            // 关闭a标签的默认行为
            return false;
        });



        // 给更新模态框中得更新按钮绑定点击响应事件
        $("#menuEditBtn").click(function() {

            // 收集表单数据
            var name = $("#menuEditModal [name=name]").val();

            var url = $("#menuEditModal [name=url]").val();

            var icon = $("#menuEditModal [name=icon]:checked").val();

            // 发送ajax请求执行更新操作
            $.ajax({
                "url": "menu-update.json",
                "type": "post",
                "data": {
                    "id": window.id,
                    "name": name,
                    "url": url,
                    "icon": icon
                },
                "dataType": "json",
                "success": function(response) {
                   var result = response.result;

                   if (result == "SUCCESS"){

                       layer.msg("操作成功！");

                       // 刷新树形结构
                        generateTree();
                    }

                   if (result == "FAILED"){
                        layer.msg("操作失败！" + response.message);
                    }
                },

                "error": function(response) {
                    layer.msg(replace.status + " " + response.statusText);
                }

            });

            // 关闭模态框
            $("#menuEditModal").modal("hide");

        });



        // 给页面删除按钮绑定单击响应函数
        $("#treeDemo").on("click",".removeBtn",function() {

            // 将当前节点的id，作为新节点的pid保存到全局变量中
            window.id = this.id;

            // 打开模态框
            $("#menuConfirmModal").modal("show");

            return false;
        });

        // 给确认删除模态框中得确认按钮绑定单击响应函数
        $("#confirmBtn").click(function() {

            // 发送ajax请求确认删除
            $.ajax({
                "url": "menu-remove.json",
                "type": "post",
                "data": {
                    "id": window.id,
                },
                "dataType": "json",
                "success": function(response) {
                    var result = response.result;

                    if (result == "SUCCESS"){

                        layer.msg("操作成功！");

                        // 刷新树形结构
                        generateTree();
                    }

                    if (result == "FAILED"){
                        layer.msg("操作失败！" + response.message);
                    }
                },
                "error": function(response) {
                    layer.msg(response.status + " " + response.statusText);
                }
            });

            // 关闭模态框
            $("#menuConfirmModal").modal("hide");

        });




    });

    </script>
</head>

<body>

<%@include file="../include/include-nav.jsp" %>

    <div class="container-fluid">
        <div class="row">
            <%@include file="../include/include-sidebar.jsp" %>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                        <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal">
                            <i class="glyphicon glyphicon-question-sign"></i>
                        </div>
                    </div>
                    <div class="panel-body">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
    <%@include file="/WEB-INF/modal/modal-menu-add.jsp"%>
    <%@include file="/WEB-INF/modal/modal-menu-confirm.jsp"%>
    <%@include file="/WEB-INF/modal/modal-menu-edit.jsp"%>
</html>